const input = document.querySelector('.sun_search .sun_search_input')
input.addEventListener('focus', function (e) {
  input.placeholder = ''
  if (e.target.value.length > 0) {
    list.classList.add('active')
  }
})
input.addEventListener('blur', function () {
  input.placeholder = '音乐，视频，电台，用户'
  list.classList.remove('active')
})
//下拉框
const list = document.querySelector('.sun_search .sun_list')
//相关搜索
const related = document.querySelector('.sun_list .sun_related_one')
//ul
const nameUl = document.querySelector('.sun_item .sun_name')
const authorUl = document.querySelector('.sun_item .sun_author')
const albumUl = document.querySelector('.sun_item .sun_album')
//歌手li
const authorLi = document.querySelector('.sun_item .sun_author li')
//ul父级 单曲给歌手专辑的大盒子
const bigMusic = document.querySelector('.sun_list .sun_music')
//没有找到相关内容
const none = document.querySelector('.sun_list .sun_none')
//span
const noneSpan = document.querySelector('.sun_none .content')
input.addEventListener('input', function (e) {
  if (e.target.value.trim() !== '') {
    list.classList.add('active')
  } else {
    list.classList.remove('active')
  }
  //设置“搜‘’相关用户”如果太长 变省略号
  if (related.offsetWidth >= 110) {
    related.style.textOverflow = 'ellipsis'
    related.style.overflow = 'hidden'
    related.style.whiteSpace = 'nowrap'
  }
  related.innerHTML = `${e.target.value}`
  axios({
    url: 'http://d67ekh.natappfree.cc/search',
    params: {
      s: e.target.value.trim()
    }
  }).then(result => {
    const Data = result.data.data
    // console.log(Data)
    // console.log(Data.length)
    if (Data.length === 0) {
      // console.log(Data.length)
      bigMusic.classList.remove('pick')
      bigMusic.classList.add('unpick')
      none.classList.remove('unpick')
      none.classList.add('pick')
      if (noneSpan.offsetWidth >= 100) {
        console.log(2211)
        noneSpan.style.textOverflow = 'ellipsis'
        noneSpan.style.overflow = 'hidden'
        noneSpan.style.whiteSpace = 'nowrap'
      }
      noneSpan.innerHTML = `${e.target.value}`
    }
    else {
      none.classList.remove('pick')
      none.classList.add('unpick')
      bigMusic.classList.remove('unpick')
      bigMusic.classList.add('pick')
      //单曲
      const nameLi = Data.map((item) => {
        return `<li>${item.name}</li>`
      }).join('')
      nameUl.innerHTML = nameLi
      //歌手
      const authorLicontent = Data.map((item) => {
        return item.author
      })
      authorLi.innerHTML = authorLicontent[0]
      //专辑
      const albumLi = Data.map((item) => {
        return `<li>${item.album}</li>`
      }).join('')
      albumUl.innerHTML = albumLi
    }
  }).catch(error => {
    console.error('请求出错:', error)
    // bigMusic.classList.remove('pick')
    // none.classList.add('pick')
  });
  input.addEventListener('keyup', function (e) {
    if (e.key === 'Enter') {
      if (e.target.value.trim() !== '') {
        list.classList.remove('active')
      }
      e.target.value = ''
      // total.innerHTML = '0/200字'
    }
  })
})
